<template>
    <div id="store">
      <el-container>
        <el-aside width="15vw" v-if="!isAdmin">
          <LeftMenu
            :category="categories"
            :books="books"></LeftMenu>
        </el-aside>
        <el-container id="main">
          <el-header :style="headerStyle">
            <CAS
              ref="cas"
              :books="bookValue"
              :is-admin="isAdmin"
              @rowAdd="rowAdd"
              @categorySelect="categorySelect"
              @stateClear="stateClear"
              @bookSearch="bookSearch"></CAS>
          </el-header>
          <el-main :style="tableStyle">
            <MainTable
              :is-admin="isAdmin"
              ref="mainTable"
              :search="search"
              :tt-body="books"
              :category="category"
              @bookValueChange="bookValueChange"
              @bookList="bookList"></MainTable>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
  import MainTable from "../components/MainTable";
  import LeftMenu from "../components/basic/LeftMenu";
  import CAS from "../components/basic/CAS";
  export default {
    name: "Store",
    components: {CAS, LeftMenu, MainTable},
    data() {
      return {
        books: [
          {
            bookName: 'C语言程序设计',
            author: '黄容',
            category: '计算机类',
            price: 20,
            num: 0
          },
          {
            bookName: '计算机概论',
            author: '严世杰',
            category: '计算机类',
            price: 25,
            num: 0
          },
          {
            bookName: '计算机网络',
            author: '谢希仁',
            category: '计算机类',
            price: 30.1,
            num: 0
          },
          {
            bookName: 'C Primer Plus',
            author: 'Stephen Prata',
            category: '计算机类',
            price: 22,
            num: 0
          },
          {
            bookName: '算法设计手册',
            author: '斯基恩纳',
            category: '计算机类',
            price: 40.6,
            num: 0
          },
          {
            bookName: '算法导论',
            author: 'Thomas H.Cormen',
            category: '计算机类',
            price: 70,
            num: 0
          },
          {
            bookName: 'PYTHON数据结构与算法分析',
            author: '布拉德利·米勒',
            category: '计算机类',
            price: 120.7,
            num: 0
          },
          {
            bookName: '大话数据结构',
            author: '程杰',
            category: '计算机类',
            price: 29.5,
            num: 0
          },
          {
            bookName: '深入理解计算机系统',
            author: '兰德尔 E.布莱恩特',
            category: '计算机类',
            price: 76.5,
            num: 0
          },
          {
            bookName: '数学与生活',
            author: '远山启',
            category: '数学类',
            price: 31.6,
            num: 0
          },
          {
            bookName: '神奇的数学：牛津教授给青少年的讲座',
            author: 'Marcus Du Sautoy',
            category: '数学类',
            price: 59.7,
            num: 0
          },
          {
            bookName: '用数学的语言看世界',
            author: '大栗博司',
            category: '数学类',
            price: 20.9,
            num: 0
          },
          {
            bookName: '数学万花筒',
            author: '伊恩·斯图尔特',
            category: '数学类',
            price: 40.2,
            num: 0
          },
          {
            bookName: '思考的乐趣',
            author: '顾森',
            category: '数学类',
            price: 56.3,
            num: 0
          },
          {
            bookName: '你不可不知的 50 个数学知识',
            author: 'Tony Crilly',
            category: '数学类',
            price: 99.9,
            num: 0
          },
          {
            bookName: '数学传奇：那些难以企及的人物',
            author: '蔡天新',
            category: '数学类',
            price: 60.9,
            num: 0
          },
          {
            bookName: '数学与人类文明',
            author: '蔡天新',
            category: '数学类',
            price: 30,
            num: 0
          },
          {
            bookName: '文化苦旅',
            author: '余秋雨',
            category: '文学类',
            price: 31.5,
            num: 0
          },
          {
            bookName: '美的历程',
            author: '李泽厚',
            category: '文学类',
            price: 15.6,
            num: 0
          },
          {
            bookName: '古典之殇',
            author: '王开岭',
            category: '文学类',
            price: 33.3,
            num: 0
          },
          {
            bookName: '诗经',
            author: '无',
            category: '文学类',
            price: 20.3,
            num: 0
          },
          {
            bookName: '论语',
            author: '无',
            category: '文学类',
            price: 30.5,
            num: 0
          },
          {
            bookName: '孟子',
            author: '无',
            category: '文学类',
            price: 20.2,
            num: 0
          },
          {
            bookName: '大学',
            author: '无',
            category: '文学类',
            price: 50.1,
            num: 0
          },
          {
            bookName: '左传',
            author: '无',
            category: '文学类',
            price: 20.2,
            num: 0
          },
          {
            bookName: '史记',
            author: '无',
            category: '文学类',
            price: 19.9,
            num: 0
          },

        ],
        category: '全部',
        categories: ['计算机类', '数学类', '文学类'],
        bookValue: [],
        search: -1,
      }
    },
    props: {
      user: {
        default() {
          return null
        }
      }
    },
    computed: {
      isAdmin() {
        return this.user === 'admin'
      },
      headerStyle() {
        return {
          'margin-top': '30px',
          'margin-right': this.isAdmin ? '-4vw' : '10vw'
        }
      },
      tableStyle() {
        return {
          'padding': '0',
          'margin-right': this.isAdmin ? '' : '10vw'
        }
      }
    },
    methods: {
      stateClear() {
        this.search = -1
      },
      categorySelect(category) {
        this.search = -1
        this.$refs.cas.state = ''
        this.category = category
      },
      bookSearch(book) {
        this.search = book.index
      },
      bookValueChange(value) {
        this.bookValue = value
      },
      rowAdd() {
        this.$refs.mainTable.rowAdd()
      },
      bookList(books) {
        this.books = books
      }
    }
  }
</script>

<style scoped>
  #store {
    width: 100vw;
    height: 95vh;
  }
  #main {
    display: flex;
    flex-direction: column;
  }
</style>
